<template>
	<view class="video-list">
		<view class="swiper-box">
			<swiper class="swiper" :vertical="true" @change="changeVideo" @touchend="touchEnd" @touchstart="touchStart">
				<swiper-item v-for="(item,index) in videoList" :key="index">
					<view class="swiper-item">
						<video-player :index="index" :video="item" ref="player" @changeMoreClick="changeMoreClick"></video-player>
					</view>
					<view class="left-box">
						<list-left :item="item"></list-left>
					</view>
					<view class="right-box">
						<list-right ref="right" :item="item"></list-right>
					</view>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>

<script>
	import videoPlayer from './viderPlayer.vue'
	import listLeft from './listLeft.vue'
	import listRight from './listRight.vue'
	let time = null
	export default {
		components:{videoPlayer,listLeft,listRight},
		props:['videoList'],
		name:"videoList",
		data() {
			return {
				pageStarty:0,
				pageEndy:0,
				pageIndex:0
			};
		},
		methods:{
			changeVideo(res){
				clearInterval(time);
				this.pageIndex = res.detail.current
				time = setTimeout(() => {
					console.log(res,123)
					if(this.pageStarty < this.pageEndy){
						console.log(res,'上')
						this.$refs.player[this.pageIndex].player()
						this.$refs.player[this.pageIndex + 1].pause()
						this.pageStarty = 0;
						this.pageEndy = 0;
					}else{
						// console.log('下')
						this.$refs.player[this.pageIndex].player()
						this.$refs.player[this.pageIndex - 1].pause()
						this.pageStarty  = 0;
						this.pageEndy = 0;
					}
				},1)
			},
			touchStart(touchStart){
				// console.log(touchStart,'touchStart')
				this.pageStarty = touchStart.changedTouches[0].pageY;
			},
			touchEnd(touchEnd){
				// console.log(touchEnd,'touchEnd')
				this.pageEndy = touchEnd.changedTouches[0].pageY;
			},
			// 监听双击
			changeMoreClick(){
			    console.log(this.$refs.right,'this.$refs.right')
				this.$refs.right[this.pageIndex].change()
			}
		}
	}
</script>

<style>
.video-list {
	height: 100%;
	width: 100%;
}

.swiper {
	height: 100vh;
	width: 100%;
}

.swiper-item {
	height: 100vh;
	width: 100%;
	z-index: 10;
}

.left-box {
	z-index: 20;
	position: absolute;
	bottom: 50px;
	left: 10px;
	color: #FFFFFF;
}

.right-box {
	z-index: 20;
	position: absolute;
	bottom: 50px;
	right: 20px;
	color: #FFFFFF;
}
</style>
